/**
 * Created by maxiaoqiang on 2018/10/9.
 */
import React, {Component} from 'react';
import {Input, Button, Form, message} from 'antd';

import "./index.less";
import {local} from "util/MyUtil";
import {HttpClient} from "util/HttpClient";

const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
        xs: {span: 24},
        sm: {span: 8}
    },
    wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
    }
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0
        },
        sm: {
            span: 24,
            offset: 14
        }
    }
};


class Setting extends Component {

    constructor(props) {
        super(props)
        this.state={
            data:local.get("userInfo")
        }
    }

    handleSubmit = ()=> {
        const {validateFields} = this.props.form;
        validateFields((error, values)=> {
            if (!error) {
                values.id = local.get("userInfo").id;
                HttpClient.post("/v1/update", values)
                    .then((response)=>{
                        if(response.data.code==200){
                            local.set("userInfo",response.data.data);
                            message.success("信息更新成功");
                        }
                    })
            }
        })
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        console.log(this.state.data.idCard)
        return (
            <div className="setting">
                <Form onSubmit={this.handleSubmit}>
                    <FormItem
                        {...formItemLayout}
                        label="昵称"
                    >
                        {getFieldDecorator('nick', {
                            rules: [{
                                message: '请输入昵称',
                            }]
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="姓名"
                    >
                        {getFieldDecorator('name', {
                            rules: [{
                                required: true,
                                message: '请输入姓名'
                            }],
                            initialValue: this.state.data.name
                        })(
                            <Input/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="身份证号码"
                    >
                        {getFieldDecorator('idCard', {
                            rules: [{
                                required: true,
                                message: '请输入18位身份证号码',
                                len:18
                            }],
                            initialValue:this.state.data.idCard
                        })(
                            <Input/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="手机号"
                    >
                        {getFieldDecorator('telephone', {
                            rules: [{
                                message: '请输入手机号码'
                            }]
                        })(
                            <Input/>
                        )}
                    </FormItem>
                    <FormItem 
                        {...tailFormItemLayout}
                    >
                        <Button type="primary" htmlType="submit">
                            更新资料
                        </Button>
                    </FormItem>
                </Form>
            </div>
        )
    }

}

export default Form.create()(Setting);
